<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
  <TITLE>TicHackToe</TITLE>
  <script type="text/javascript" src="media/jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
  function onExit()
    {
        alert("put message here letting user know he just lost")
        document.forms["quit_game"].submit();
        //http://127.0.0.1:8000
    }
    
  function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for ( var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  var t;
  function refreshState() {
        document.forms["refresh"].submit();
  }
  
  function refresh(cont)
  {
    if (cont == 1) {
        t = setTimeout("refreshState()", 3000);
    }
    else {
        clearTimeout(t);
    }
  }
  
  /*onload = function() {
    refresh();    
  }*/
   
  function make_move(cell, table_id, position)
  {
    
    /*alert ("Making a move for cell " + cell + " tableid " + table_id + " position " + position );*/
    //turn off refresh, update and turn refresh back on
    clearTimeout(t);
    var form = document.createElement("form")
	form.setAttribute("method", "post")
	form.setAttribute("action", "make_move")
	
	cookieValue = getCookie('csrftoken')
  var hiddenField = document.createElement("input");
  hiddenField.setAttribute("type", "hidden");
  hiddenField.setAttribute("name", "csrfmiddlewaretoken");
  hiddenField.setAttribute("value", cookieValue);
	form.appendChild(hiddenField);
    var hiddenField0 = document.createElement("input");
	hiddenField0.setAttribute("type", "hidden");
	hiddenField0.setAttribute("name", "move");
	hiddenField0.setAttribute("value", cell);
    form.appendChild(hiddenField0);
    var hiddenField1 = document.createElement("input");
    hiddenField1.setAttribute("type", "hidden");
	hiddenField1.setAttribute("name", "table_id");
	hiddenField1.setAttribute("value", table_id);
    form.appendChild(hiddenField1);
   
    var hiddenField2 = document.createElement("input");
    hiddenField2.setAttribute("type", "hidden");
	hiddenField2.setAttribute("name", "Position");
	hiddenField2.setAttribute("value", position);
    form.appendChild(hiddenField2);
    
     var hiddenField2 = document.createElement("input");
    hiddenField2.setAttribute("type", "hidden");
  hiddenField2.setAttribute("name", "game_id");
  hiddenField2.setAttribute("value", {{ game_id }});
    form.appendChild(hiddenField2);

    document.body.appendChild(form);
    form.submit();
    
    //refresh();
  }
  
  
  function quit_game(inProgress) {
    if (inProgress == 1) {
        var answer = confirm ("Are you sure you want to quit?")
        if (answer == true)
            document.forms["quit_game"].submit();
        else
            document.forms["quit_game"].close();
    } else {
        document.forms["quit_game"].submit();
    }
    
    /*clearTimeout(t);   
    var form = document.createElement("form")
	form.setAttribute("method", "post")
	form.setAttribute("action", "quit")
    var hiddenField1 = document.createElement("input");
    hiddenField1.setAttribute("type", "hidden");
	hiddenField1.setAttribute("name", "table_id");
	hiddenField1.setAttribute("value", table_id);
    form.appendChild(hiddenField1);
    
    document.body.appendChild(form);
    form.submit();*/

  }
  
</script>
</HEAD>
<BODY LANG="en-US" DIR="LTR">
<body onLoad="refresh('{{ refresh|escape }}')">
<!-- <body onbeforeunload="quit_game();"> -->
<H1>Tic Tac Toe Table {{ table }}</H1>
<P>{% if error_message %}</P>
<P><STRONG>{{ error_message|escape }}</STRONG></P>
<P>{% endif %}</P>
<P>Your position: {{ position|escape }}</P>
<P>Opponent: </P>
<P>Game Status: {% if game_status == position %}.  Make your move {% else %} {{ game_status|escape }} {% endif %}</P>
<P>Game Id: {{ game_id|escape }}</P>
<form name=status>
<FORM ACTION="game" METHOD="POST">
	<P>{% csrf_token %}	</P>
</FORM>
<FORM id="refresh" ACTION="refresh" METHOD="POST">
  <P>{% csrf_token %}</P>
  <INPUT TYPE="hidden" name="Position" value={{ position|escape }}>
  <INPUT TYPE="hidden" name="table_id" value={{ table|escape }}>
  <INPUT TYPE="hidden" name="game_id" value={{ game_id|escape }}>
</FORM>
<FORM id="quit_game" ACTION="quit_game" METHOD="POST">
  <P>{% csrf_token %}</P>
  <INPUT TYPE="hidden" name="table_id" value={{ table|escape }}>
</FORM>
<FORM id="make_move" ACTION="make_move" METHOD="POST">
  <P>{% csrf_token %}</P>
  <INPUT TYPE="hidden" name="Position" value={{ position|escape}}>
  <INPUT TYPE="hidden" name="table_id" value={{ table|escape }}>
</FORM>
<table id="game_table"
		style="text-align: left; width: 450px; height: 300px;" border="2"
		cellpadding="2" cellspacing="2">
<tr><td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if NW %}
        {{ NW|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('NW', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
<td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if N %}{{ N|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('N', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
</td>
<td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if NE %}{{ NE|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('NE', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
</td></tr>
<tr><td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if W %}{{ W|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('W', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
</td>
<td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if C %}{{ C|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('C', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
</td>
<td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if E %}{{ E|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('E', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
</td></tr>
</td></tr>
<tr><td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if SW %}{{ SW|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('SW', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>
</td>
<td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if S %}{{ S|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('S', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1>  
</td>
<td style="vertical-align: center; width: 100px; text-align: center;">
    <H1>{% if SE %}{{ SE|escape }}
      {% else %}
        {% if game_status == position %}
        <a href="javascript:make_move('SE', {{ table|escape }}, '{{ position|escape }}')">_</a>
        {% else %}
        _
        {% endif %}
      {% endif %}
    <H1> 
</td></tr>
</table>
<button name="quit" type="button" onclick="javascript:quit_game('{{ refresh|escape }}')">Quit</button>
</BODY>
</HTML>
